import React, { Component } from 'react';
import { StyleSheet, View, Image, Dimensions, ScrollView,TouchableOpacity } from 'react-native'
import { BottomButton, Label, Button } from 'iftide'

// 获取屏幕高度
const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;

export default class Basic extends Component {
    constructor(props) {
        super(props);
    }

    onPress(value) {
        alert(value);
    }

    render() {
        return (

            <View style={{height:'100%'}}>
                <ScrollView>
                    <View style={{justifyContent: 'center', alignItems: 'center',height: 1.2 * height}}>
                        <Image style={styles.image} source={require('./Icon.png')}/>
                        <Label text={'ContainerContent'} labelStyle={{fontSize: 30}}/>
                        <Button title={'按钮'} onPress={(value) => {alert(value)}}/>
                    </View>
                </ScrollView>
                <BottomButton
                    title={'购买'}
                    onPress={this.onPress}
                    size={'small'}
                    disabled={false}
                    disabledAdd={false}
                    isRadius={false}
                    isTwo={false}
                    btnStyle={{width:width-210}}
                >
                    <View style={{flexDirection:'row',width:210,height: 49,backgroundColor:'green'}}>
                        <TouchableOpacity activeOpacity={1} style={styles.containerBottom} onPress={()=>{alert('加自选')}}>
                            <Image style={styles.icon} source={require('./Icon.png')}/>
                            <Label text={'加自选'} type={'description'}/>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={1} style={[styles.containerBottom,{borderLeftWidth:1,borderLeftColor:'#d8d8d8'}]} onPress={()=>{alert('定投')}}>
                            <Label text={'定投'} labelStyle={{color:'#ff7b7b'}} type={'description'}/>
                        </TouchableOpacity>
                    </View>
                </BottomButton>
            </View>

        );
    }
}


const styles = StyleSheet.create({
    containerContent: {
        justifyContent: 'center',
        alignItems: 'center',
        height: 1.2 * height,
    },
    containerBottom: {
        // flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
        height: 49,
        flex:1
    },
    image: {
        width: 100,
        height: 100,
        marginVertical: 20,
    },
    icon: {
        width: 15,
        height: 15,
        marginHorizontal: 5,
    }

});
